<template>
  <div
    class="survey-com-item-container pointer flex justify-content-center align-items-center self-center pl-10 pr-10 mb-10"
    @click="addSurveyCom"
  >
    {{ item.comName }}
  </div>
</template>

<script setup lang="ts">
import { defaultStatusMap } from '@/configs/defaultStatus/defaultStatusMap';
import { updateInitStatusBeforeAdd } from '@/utils';
import { useEditorStore } from '@/stores/useEditor';
import EventBus from '@/utils/eventBus';

import type { Material } from '@/types';
type Item = {
  materialName: Material;
  comName: string;
};
const props = defineProps<{
  item: Item;
}>();
const store = useEditorStore();

function addSurveyCom() {
  const newSurveyName = props.item.materialName;
  if (newSurveyName) {
    const newSurveyComStatus = defaultStatusMap[newSurveyName]();
    updateInitStatusBeforeAdd(newSurveyComStatus, newSurveyName);
    store.addCom(newSurveyComStatus);
    EventBus.emit('scrollToBottom');
  }
}
</script>

<style scoped lang="scss">
.survey-com-item-container {
  width: 70px;
  height: 30px;
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  color: var(--font-color-light);
  user-select: none;
}
.survey-com-item-container:hover {
  background-color: var(--font-color-lightest);
}
</style>
